<template>
    <div class="operate-screen">
        <button class="return-btn" @click="goBack">
            ←
        </button>
        <div class="viewport">
            <div class="content">
                <div class="left-con">
                    <!-- <div class="panel ltop">
                        <div class="inner">
                          
                        </div>
                    </div> -->
                    <div class="panel lcenter">
                        <div class="inner">
                            <div class="panel-title">发货未开票</div>
                            <SaleNotReceipt origin="screen" height="340"></SaleNotReceipt>
                        </div>
                    </div>
                    <div class="panel lbottom">
                        <div class="inner">
                            <div class="panel-title">开票未回款</div>
                            <SaleNotReturn origin="screen" height="340"></SaleNotReturn>
                        </div>
                    </div>
                </div>
                <div class="center-con">

                    <!-- <div class="panel ctop">
                        <div class="inner">
                            <div class="panel-title">区域任务进度达成</div>
                  
                            <RegionTaskReach></RegionTaskReach>
                        </div>
                    </div> -->
                    <div class="ctop">
                        <div class="bar">
                            <div class="item">
                                <span>本月总收入</span>
                                <div class="item-num">
                                    <h4>{{ monthMoney.total_freight }}</h4>元
                                </div>
                                
                            </div>
                            <div class="item">
                                <span>本月总成本</span>
                                <div class="item-num">
                                    <h4>{{ monthMoney.total_cost }}</h4>元
                                </div>
                                
                            </div>
                            <!-- <div class="item">
                                <h4>111</h4>
                                <span>运费</span>
                            </div> -->
                        </div>
                    </div>
                    <div class="panel ccenter">
                        <div class="inner">

                            <div class="panel-title">收入成本分析</div>
                            <CostAnalysis origin="screen" height="380"></CostAnalysis>
                        </div>
                    </div>
                </div>
                <div class="right-con">
                    <div class="panel rbottom">
                        <div class="inner">
                            <div class="bottom-nav">
                                <div @click="activeIndex = 1" class="panel-title" :class="{ active: activeIndex === 1 }">客户收入统计
                                </div>
                                <el-divider direction="vertical" class="divider"></el-divider>
                                <div @click="activeIndex = 2" class="panel-title" :class="{ active: activeIndex === 2 }">客户流失预警
                                </div>
                            </div>
                            <div style="margin-top: 15px;">
                                <Revenue origin="screen" v-if="activeIndex === 1"></Revenue>
                                <LossWarning origin="screen" v-if="activeIndex === 2"></LossWarning>
                            </div>
                        </div>
                    </div>
                    <div class="panel rcenter">
                        <div class="inner">
                            <RegionTaskReach></RegionTaskReach>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import SaleNotReceipt from "@/page/index/components/operating/saleNotReceipt.vue";
import SaleNotReturn from "@/page/index/components/operating/saleNotReturn.vue";
import CostAnalysis from "@/page/index/components/analysis/costAnalysis.vue";
import Revenue from "@/page/index/components/analysis/revenue.vue";
import RegionTaskReach from "@/page/index/components/operating/regionTaskReach.vue";
import LossWarning from "@/page/index/components/analysis/lossWarning.vue";
import { RevenueCostTotal } from "@/api/echarts";

export default {
    name: 'operate',
    components: { SaleNotReceipt, SaleNotReturn, CostAnalysis, Revenue, LossWarning, RegionTaskReach },
    props: [],
    data() {
        return {
            activeIndex: 1,
            monthMoney:{}
        };
    },
    mounted() { 
        RevenueCostTotal({}).then(res=>{
            console.log(res,'rrrrrrrr')
            this.monthMoney=res.data
        })
    },
    methods: {
        goBack(){
            this.$router.back()
        }
    },
};
</script>
<style lang="scss" scoped>
.operate-screen {
    background: rgb(16, 17, 41);
    min-height: 100vh;
    color: #1d5979;

    .viewport {
        min-width: 1024px;
        max-width: 1920px;
        min-height: 780px;
        margin: 0 auto;
        background: url(./images/logo.png) no-repeat 0 0 / contain;
        display: flex;
        padding: 80px 18px 0;
    }

    .panel {
        height: 200px;
        box-sizing: border-box;
        border: 2px solid red;
        border-image: url(./images/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        position: relative;
        margin-bottom: 18px;

        .inner {
            position: absolute;
            top: -2.125rem;
            right: -1.583rem;
            bottom: -0.875rem;
            left: -5.5rem;
            padding: 1rem 1.5rem;
        }

        .panel-title {
            font-size: 13px;
            color: #fff;
            text-align: left;
            padding-bottom: 5px;
        }
    }




    .title {
        // display: flex;
        width: 100%;
        height: 55px;
        // background: url(./head_bg.png) no-repeat center center;
        color: #fff;
        text-align: center;
        font-size: 24px;
        line-height: 50px;
    }

    .content {
        display: flex;
        width: 100%;

        .left-con {
            flex: 4;

            .ltop {
                height: 110px;

                .inner {
                    display: flex;
                    justify-content: space-between;
                    padding: 0px 30px;
                    align-items: center;

                    h4 {
                        font-size: 20px;
                        padding-left: 0.2rem;
                        color: #fff;
                        margin-bottom: 0.333rem;
                    }

                    span {
                        font-size: 12px;
                        color: #4c9bfd;
                    }
                }

            }

            .lcenter {
                height: 390px;
            }

            .lbottom {
                height: 390px;
            }
        }

        .center-con {
            flex: 3.5;
            margin: 20px 15px 0;

            .ctop {
                height: 280px;
                margin-top: 35px;
                margin-bottom: 18px;
                display: flex;
                justify-content: center;
                background: rgba(101, 132, 226, .1);
                padding: 0.15rem;

                .bar {
                    // display: flex;
                    padding-top: 40px;

                    .item {
                        // min-width: 200px;
                        display: flex;
                        // flex-direction: column;
                        align-items: center;

                        .item-num {
                        }

                        h4 {
                            display: inline-block;
                            line-height: 85px;
                            color: #20dbfd;
                            text-shadow: 0 0 25px #00d8ff;
                            font-size: 46px;
                            font-family: 'yjsz';
                            text-align: right;
                            padding-right: 10px;
                        }

                        span {
                            color: #1950c4;
                            padding-right: 10px;
                        }
                    }
                }
            }

            .ccenter {
                height: 435px;
                display: flex;
                background: #101129;
            }
        }

        .right-con {
            flex: 4;

            .rtop {
                padding: 20px;
                height: 130px;

                .rt-nav {
                    span {
                        color: #1950c4;
                        line-height: 12px;
                        font-size: 12px;
                        padding: 0 0.75rem;
                        border-right: 1px solid #00f2f1;

                        &:first-child {
                            padding-left: 0;
                        }
                    }
                }

                .rt-card {
                    display: flex;
                    margin-top: 16px;

                    .item {
                        margin-right: 30px;

                        h4 {
                            font-size: 20px;
                            padding-left: 0.2rem;
                            color: #fff;
                            margin-bottom: 0.333rem;
                        }

                        span {
                            font-size: 12px;
                            color: #4c9bfd;
                        }
                    }
                }
            }

            .rcenter {
                height: 390px;
            }

            .rbottom {
                height: 390px;

                .bottom-nav {
                    display: flex;

                    .panel-title {
                        cursor: pointer;
                        color: #1950c4;

                        // min-width: 80px;
                        &.active {
                            color: #fff;
                        }
                    }

                    .divider {
                        margin: 0 15px;
                        background-color: #00f2f1;
                    }
                }
            }
        }
    }
}
.return-btn {
  font-size: 20px;
  background-color: rgb(27,87,156);
  color: rgb(29,199,237);
  width: 45px;
  height: 25px;
  line-height: 25px;
  border: 1px solid rgb(29,199,237);
  border-radius: 8px;
  cursor: pointer;
  position: absolute;
  top:33px;
  left: 24px;
}

.return-btn:hover {
  animation: bounce_513 1s infinite;
}

@keyframes bounce_513 {
  0%,
    100% {
    transform: translateX(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
</style>